<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 500%"></div>
<script th:src="@{/js/echarts.min.js}" src="../static/js/echarts.min.js"></script>
<script th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
<script type="text/javascript">
   // var dom = document.getElementById('container');

   var chart = echarts.init(document.getElementById('container'));

    // 使用Ajax异步获取数据
    $.ajax({
        url: '/echarts/index/list',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            console.log(data);
            var option = {
                title: {
                    text: '区域销量统计',
                    textStyle: {
                        textAlign: 'center'
                    }
                },
                tooltip: {},
  /*              xAxis: {
                    data: data.labels
                },*/
                xAxis: {
                    type: 'category',
                    data: data[0]
                },
                yAxis: {},
                series: [
                    {
                        //data: [120, 200, 150],
                        data: data[1],
                        type: 'bar'
                    }
                ]
                /*series: [{
                    name: 'Count',
                    type: 'bar',
                    data: data.values,
                    itemStyle: {
                        color: function(params) {
                            // 设置背景颜色
                            var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD'];
                            return colorList[params.dataIndex];
                        }
                    }
                }]*/
            };
            chart.setOption(option);
        }
    });




 //   var myChart = echarts.init(dom, null, {
 //       renderer: 'canvas',
 //       useDirtyRect: false
 //   });
  //  var app = {};

 //   var option;

/*    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };*/

    // if (option && typeof option === 'object') {
    //     myChart.setOption(option);
    // }
    //
    // window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>